<template>
    <div>
        <a-modal
            :title="title"
            :visible="visible"
            :confirmLoading="loading"
            width="1000px"
            @cancel="() => $emit('cancel')"
            :footer="false"
        >
            <div>
                <a-row>
                    <a-col class="expert" :md="6" :sm="6">
                        <a-tree
                            style="height: 400px; overflow: auto"
                            :selectedKeys.sync="selectedKeys"
                            :replaceFields="Modifyfield"
                            @select="getTableData"
                            :tree-data="org"
                            default-expand-all
                        ></a-tree>
                    </a-col>
                    <a-col :md="1" :sm="1"></a-col>
                    <a-col :md="17" :sm="17">
                        <a-row>
                            <a-col :md="24" style="margin-bottom: 12px">
                                <a-input-search
                                    placeholder="员工名称/电话号码/员工编号"
                                    v-model.trim="content"
                                    @search="onSearch"
                                ></a-input-search>
                            </a-col>
                        </a-row>
                        <div v-if="showAdd">
                            <a-button v-show="isAdd" type="primary" style="margin-bottom: 10px" @click="getExternal"
                            >添加外部人员
                            </a-button
                            >
                            <div style="margin: 10px 0" v-show="!isAdd">
                                参与人名称：
                                <BaseInput
                                    style="width: 30%"
                                    v-model="outside"
                                    placeholder="请输入外部参与人员"
                                    :maxLength="maxLength"
                                    @change="editError"
                                ></BaseInput>
                                <a-button type="primary" style="margin-left: 20px" @click="getOutside">添加</a-button>
                                <a-button style="margin-left: 20px" @click="cancel">取消</a-button>
                            </div>
                        </div>
                        <p v-show="addError" style="margin: 10px 90px; color: red">请填写正确名称！</p>
                        <s-table
                            ref="table"
                            size="default"
                            rowKey="id"
                            :columns="columns"
                            :scroll="{ y: 260 }"
                            :data="loadData"
                            :alert="true"
                            :pageKeys="['pageNumber', 'pageSize']"
                            show-size-changer
                            show-quick-jumper
                            showPagination="auto"
                        >
              <span slot="action" slot-scope="text, record">
                <template>
                  <a @click="handleAdd(record)">添加</a>
                </template>
              </span>
                        </s-table>
                    </a-col>
                </a-row>
            </div>
        </a-modal>
    </div>
</template>

<script>
import { STable } from '@/components'
import { getCustOrgTree, getStaff } from '@/api/subassembly/TreeSelectOrganization'

export default {
  name:'a'+Date.now(),
  data() {
        return {
            Modifyfield: {
                children: 'children',
                title: 'label',
                key: 'id'
            },
            personnelTable: [],
            ID: undefined,
            columns: [
                {
                    title: '员工名称',
                    dataIndex: 'name'
                },
                {
                    title: '员工编号',
                    dataIndex: 'jobNum'
                },
                {
                    title: '电话号码',
                    dataIndex: 'phoneNum'
                },
                {
                    title: '职称',
                    dataIndex: 'jobTitle'
                },
                {
                    title: '操作',
                    width: '100px',
                    scopedSlots: { customRender: 'action' }
                }
            ],
            queryParam: {},
            loadData: (parameter) => {
                this.queryParam.orgId = this.ID
                this.queryParam.scienceOrNot = 2
                let args = Object.assign({}, parameter, this.queryParam)
                return getStaff(args).then((res) => {
                    res.currentPage = res.pageNumber
                    res.totalPage = res.totalPages
                    res.totalSize = res.totalElements
                    return res
                })
            },
            selectedKeys: [],
            isAdd: true,
            maxLength: 10,
            outside: undefined,
            // Personnel: [],
            doublePersonnelList: [],
            content: undefined,
            addError: false,
            org: []
        }
    },
    components: {
        STable
    },
    props: {
        list: {
            type: Array,
            default: () => []
        },
        visible: {
            type: Boolean,
            required: true
        },
        loading: {
            type: Boolean,
            default: () => false
        },
        title: {
            type: String,
            default: () => '添加参与人'
        },
        isdouble: {
            type: Boolean,
            default: () => false
        },
        showAdd: {
            type: Boolean,
            default: () => true
        }
    },
    created() {
        getCustOrgTree({ containVirtual: 0 }).then((res) => {
            if (res.data && res.data.length > 0) {
                this.org = res.data
                this.ID = res.data[0].id
                this.selectedKeys = [res.data[0].id]
            }
        })
    },
    methods: {
        handleAdd(record) {
            if (!this.$props.isdouble) {
                if (this.list.some((item) => item.employeeId === record.id || item.id === record.id)) {
                    this.$message.warning('此人员已添加过！')
                    return
                }
                this.list.push({
                    name: record.employeeName || record.name,
                    id: record.employeeId || record.id
                })
                this.$emit('update:list', this.list)
                this.$message.success('已添加')
            } else {
                if (this.doublePersonnelList.some((item) => item.employeeName === record.name)) {
                    this.$message.warning('此人员已添加过！')
                    return
                }
                this.doublePersonnelList.push({
                    employeeName: record.employeeName || record.name
                })
                this.$emit('addDoublePersonnel', this.doublePersonnelList)
                this.$message.success('已添加')
            }
        },
        handleOk(e) {
            this.confirmLoading = true
            setTimeout(() => {
                this.visible = false
                this.confirmLoading = false
            }, 2000)
        },
        getTableData(selectedKeys, info) {
            this.ID = info.selectedNodes[0].data.props.id
            this.onSearch()
        },
        getExternal() {
            this.isAdd = false
        },
        cancel() {
            this.isAdd = true
        },
        getOutside() {
            let regexp = /^[\u4e00-\u9fa5]{1,6}(·[\u4e00-\u9fa5]{1,6}){0,2}$/ //姓名正则
            if (this.Personnel.some((item) => item.employeeName == this.outside)) {
                this.$message.warning('此人员已添加过！')
                return
            }
            if (!regexp.test(this.outside)) {
                this.addError = true
                return false
            }
            if (!this.$props.isdouble) {
                this.Personnel.push({
                    employeeName: this.outside
                })
                this.$emit('addJoinPersonnel', this.Personnel)
                this.$message.success('已添加')
                // this.outside = undefined
            } else {
                this.doublePersonnelList.push({
                    name: this.outside
                })
                this.$emit('addDoublePersonnel', this.doublePersonnelList)
                this.$message.success('已添加')
                // this.outside = undefined
            }
        },
        onSearch() {
            // let regexp = /^[\u4e00-\u9fa5]{1,6}(·[\u4e00-\u9fa5]{1,6}){0,2}$/ //姓名正则
            // let mPattern = /^1[34578]\d{9}$/ //手机号正则
            // let posPattern = /^\d{3}$/ //用户编号正则
            // if (regexp.test(this.content)) {
            //   this.queryParam.name = this.content
            //   this.queryParam.phoneNum = this.queryParam.jobNum = undefined
            // }
            // if (mPattern.test(this.content)) {
            //   this.queryParam.phoneNum = this.content
            //   this.queryParam.name = this.queryParam.jobNum = undefined
            // }
            // if (posPattern.test(+this.content)) {
            //   this.queryParam.jobNum = this.content
            //   this.queryParam.name = this.queryParam.phoneNum = undefined
            // }
            this.queryParam.key = this.content
            this.$refs.table.refresh(true)
            // this.content = undefined
        },
        editError() {
            this.addError = false
        }
    }
}
</script>

<style lang='less' scoped>
</style>
